
////打印<div id="box01">里面的内容（取值，括号中内容为空）：
//var str1=$("#box01").text();
//console.log(str1);
//
//
////打印html标签（取值，括号中内容为空）：
//var str2=$("#box01").html();
//console.log(str2);
//
//
////改变值，括号中内容为新赋予的值(显示在预览处，而不是控制台）：
//var str3=$("#box01").text("change!");
//console.log(str1);

//////////////////////////////////////////////////////////////////////////////////////////////////////////

//  ——表格制作——
$(function(){


// 一、全选、全不选：

    // 单选框、多选框、下拉三角形、input用change事件，取属性或设置属性关键字用prop；
    // button及其他用click事件，取属性或设置属性关键字用attr。
    // input的value取值用val();，其他的都用text();。
    $("#check-all").change( function(){

        //判断的是自己，所以$(this) .is(":checked")都写在if的（）里面。checked前面的：符号不能漏！
        if( $(this) .is(":checked") ){
            //已选中
            console.log("已钩选");
            $(".check").prop("checked",true);

        }else{
            //未选中
            console.log("取消钩选");
            $(".check").prop("checked",false);
        }
    });



// 二、删除（选中的整行删除）：

    $("#del-tr").click(function(){

        //选中的那一行全部删除，判断条件是.check:checked，需删除的是tr，删除用remove。
        $(".check:checked").parents("tr").remove();

    });



// 三、修改（选中的一行中第2、3、4列修改）,修改函数要多次使用要先封装：

    //未封装：
    /* $(".change").click(function(){

        var btn_change = $(this).text();   // 这是判断条件
        var td = $(this).parents("tr").children();   //  通过自己选到祖先tr，再到子元素td（所有td）。如果不加"tr"会选中所有祖先，包括table，整个表格都会被删掉。
        //  或：var td = $(this).parent().siblings();    //  通过自己选到父元素,再选中除了直系父元素以外的其他同辈元素（叔伯）。

        if(btn_change==="修改"){
            for (var i = 1; i<4; i++) {  // 数组是从0开始计数的，即第一个是0，所以要选中2-4对应的eq是1-3。此处共有3次循环。

                var val_1 = td.eq(i).text();    // 声明val变量（名称自己取），变量为：第i个td的取值。

                td.eq(i).html("<input type='text' value=" + val_1 + ">");  // 把td改成input,里面的value值就是td原本填的值，所以整个input分成三段，并用加号拼接起来。
            }
            $(this).text("确定");  // 读取的是html中button的值，如果用的是input，要用val来改变value的值。
        }else{
            for(var k=1; k<4; k++){
                var val_2 = td.eq(k).children().val();
                td.eq(k).html(val_2);
            }
            $(this).text("修改");
        }
    });  */
  //  已封装，封装注意：要把所有this改成形参（自己取名字），最后调用函数时用this。
    function handle(hs){
        var btn_change = $(hs).text();
        var td = $(hs).parents("tr").children();
        if(btn_change==="修改"){
            for (var i = 1; i<4; i++) {

                var val_1 = td.eq(i).text();

                td.eq(i).html("<input type='text' value=" + val_1 + ">");
            }
            $(hs).text("确定");
        }else{
            for(var k=1; k<4; k++){
                var val_2 = td.eq(k).children().val();
                td.eq(k).html(val_2);
            }
            $(hs).text("修改");
        }
    }

    //调用函数：
    $(".change").click(function(){
        handle(this);
    });



// 四、新增：
    $("#sure").click(function(){

    //第一步： 取值，取输入框输入的值。
        var gname = $(".goodsName").val();
        var gnum = $(".goodsNumber").val();
        var gunit = $(".goodUnit").val();

        // if else判断如果新增的三个输入框内容都不为空则执行if里的语句，否则执行else里的语句（跳出弹窗提醒）
        if(gname && gnum && gunit){

    // 第二部：拼接dom元素，即html中完整的五行td。
            var tr = $("<tr></tr>");   //创建tr
            var str = "<td><input type='checkbox' class='check'/></td>" +
                      "<td>" +gname+"</td>"+
                      "<td>" +gnum+"</td>"+
                      "<td>" +gunit+"</td>"+
                      "<td><button type='button' class='change'>修改</button></td>";    //  拼接dom元素。

            tr.html(str);     //把拼接好的元素放到html中

    //第三部：把js生成的dom元素添加到tbody中
            $("#Tbody").append(tr);     //把tr增加到tbody中


    //第四部：清空输入框的内容
            $(".goodsName").val("");
            $(".goodsNumber").val("");
            $(".goodUnit").val("");


    //第五部：重复挂用一次修改事件
            $(".change").click(function(){
                handle(this);
            });


        }else{
            alert("请先将表单填写完整后再提交！");
        }

    });

});
